<template>
	<view class="care-record-page">
		<custom-navbar class="navigation" title="护理记录" :isReturnVisible="false" :isAddVisible="false" />
		<view class="search-row">
			<view class="search-bar">
				<!-- 添加v-model绑定搜索关键词 -->
				<input class="search-input" placeholder="输入项目名称" v-model="searchKeyword" />
				<!-- 将搜索图标改为按钮并绑定点击事件 -->
				<view class="search-btn" @click="handleSearch">
					<image src="/static/icons/search.png" class="search-icon"></image>
				</view>
				<image src="/static/icons/mic.png" class="search-icon"></image>
			</view>
		</view>
		<!-- 标题行 -->
		<view class="title-row">
			<view class="record-project-name">
				项目
			</view>
			<view class="record-care-count">
				数量
			</view>
			<view class="record-care-start-time">
				时间
			</view>
			<view class="record-score">
				评分
			</view>
			<view class="evaluate-btn">
				操作
			</view>
		</view>
		<!-- 没有护理记录时显示 -->
		<!-- 空状态提示 -->
		<view class="empty-container" v-if="!filteredRecordList||filteredRecordList.length==0">
			<image class="empty-image" src="/static/icons/empty.png"></image>
			<view class="empty-text">空空如也 · 暂无护理记录</view>
			<view class="empty-subtext">您暂时还没有任何护理记录<br>所有护理记录将在这里展示</view>
		</view>
		<view class="record-list" v-else>
			<view class="record-item" v-for="(item, idx) in filteredRecordList" :key="idx">
				<view class="record-project-name">
					{{ item.projectName }}
				</view>
				<view class="record-care-count">
					{{ item.careCount }}
				</view>
				<view class="record-care-start-time">
					{{ item.careStartTime }}
				</view>
				<view class="record-score" v-if="item.score!=null">
					{{ item.score }}
				</view>
				<view class="evaluate-btn" v-else>

					<navigator :url="`/pages/addScore/addScore?serviceRecordId=${item.serviceRecordId}`">
						<button size="mini"
							style="border-radius: 5px; background-color: #F6A031; color: white;">评价</button>
					</navigator>

				</view>
				<view class="detail-btn">
					<navigator :url="`/pages/recordDetail/recordDetail?serviceRecordId=${item.serviceRecordId}`">
						<button size="mini"
							style="border-radius: 5px; background-color: #F6A031; color: white;">详情</button>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		toRaw
	} from 'vue';
	import {
		getCareRecordList
	} from '../../api/record';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import customNavbar from '@/components/custom-navbar.vue';
	// const recordList = ref([])
	// const getRecordList = async () => {
	// 	const res = await getCareRecordList();
	// 	if (res && res.data) {
	// 		recordList.value = res.data;
	// 	}
	// }
	// 添加搜索关键词响应式变量
	const searchKeyword = ref('');

	// 修改为原始记录列表
	const originalRecordList = ref([]);

	// 添加过滤后的记录列表
	const filteredRecordList = computed(() => {
		const keyword = searchKeyword.value.trim();
		if (!keyword) {
			return originalRecordList.value;
		}

		// 支持中文和英文大小写不敏感搜索
		return originalRecordList.value.filter(item => {
			// 直接匹配（中文或英文）
			if (item.projectName.includes(keyword)) {
				return true;
			}

			// 大小写不敏感匹配（处理英文大小写）
			const lowerProjectName = item.projectName.toLowerCase();
			const lowerKeyword = keyword.toLowerCase();
			return lowerProjectName.includes(lowerKeyword);
		});
	});

	const getRecordList = async () => {
		const res = await getCareRecordList();
		console.log(res.data);
		if (res && res.data) {
			originalRecordList.value = res.data;
		}
	}

	// 添加搜索处理函数
	const handleSearch = () => {
		// 计算属性会自动更新，无需额外操作
		// 这里可以添加搜索反馈（可选）
		uni.hideKeyboard(); // 隐藏键盘
		console.log(searchKeyword.value)
		console.log(originalRecordList.value)
		console.log(filteredRecordList.value)
		uni.showToast({
			title: '搜索中...',
			icon: 'loading',
			duration: 500
		});
	};
	onLoad(() => {
		getRecordList();
	})
	// const recordList = [{
	// 		serviceRecordId: 22,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-23",
	// 		score: 92.0
	// 	},
	// 	{
	// 		serviceRecordId: 21,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健二",
	// 		careStartTime: "2025-07-02",
	// 		score: null
	// 	},
	// 	{
	// 		serviceRecordId: 20,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-07-01",
	// 		score: null
	// 	},
	// 	{
	// 		serviceRecordId: 19,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-30",
	// 		score: null
	// 	},
	// 	{
	// 		serviceRecordId: 18,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 91.0
	// 	},
	// 	{
	// 		serviceRecordId: 7,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 86.0
	// 	},
	// 	{
	// 		serviceRecordId: 6,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 94.0
	// 	},
	// 	{
	// 		serviceRecordId: 10,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 68.0
	// 	},
	// 	{
	// 		serviceRecordId: 9,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 89.0
	// 	},
	// 	{
	// 		serviceRecordId: 8,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 77.0
	// 	},
	// 	{
	// 		serviceRecordId: 5,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 83.0
	// 	},
	// 	{
	// 		serviceRecordId: 4,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-25",
	// 		score: 69.0
	// 	},
	// 	{
	// 		serviceRecordId: 3,
	// 		projectName: "吸氧",
	// 		careCount: 2,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-21",
	// 		score: 96.0
	// 	},
	// 	{
	// 		serviceRecordId: 2,
	// 		projectName: "吸氧",
	// 		careCount: 2,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-21",
	// 		score: 82.0
	// 	},
	// 	{
	// 		serviceRecordId: 1,
	// 		projectName: "吸氧",
	// 		careCount: 1,
	// 		caregiverName: "健一",
	// 		careStartTime: "2025-06-21",
	// 		score: 94.0
	// 	}
	// ]
</script>

<style scoped>
	.care-record-page {
		min-height: 100vh;
		background: url('@/static/background.png') no-repeat;
		/* background-size: cover; */
		padding-bottom: 20px;
		padding-top: 30px;
	}

	.top-bar {}

	.search-row {
		display: flex;
		align-items: center;
		padding: 10px 16px 0 16px;
		margin-top: 40px;
		gap: 8px;
	}

	.search-bar {
		flex: 1;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 18px;
		box-shadow: 0 2px 8px rgba(91, 184, 172, 0.10);
		padding: 0 10px;
		height: 32px;
		min-width: 0;
	}

	/* 添加搜索按钮样式 */
	.search-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		/* background-color: #F6A031; */
		margin-left: 8px;
	}

	.search-btn .search-icon {
		width: 18px;
		height: 18px;
	}

	.search-icon {
		border: 1;
		width: 18px;
		height: 18px;
		margin-right: 4px;
	}

	.search-input {
		flex: 1;
		border: none;
		background: transparent;
		font-size: 14px;
		color: #333;
		outline: none;
		height: 32px;
		line-height: 32px;
	}

	.title-row {
		margin-top: 40px;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}

	.record-list {
		margin-top: 30px;
	}

	.record-item {
		min-height: 60px;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		border-top: 1px solid #333;
		border-color: #555;
		/* border-radius: 4px; */
		/* margin: 8px 0; */
		/* margin-top: 8px; */
		/* margin-bottom: 4px; */
	}

	.record-project-name {
		font-size: 14px;
		flex: 2;
	}

	.record-care-count {
		font-size: 14px;
		flex: 1;
	}

	.record-care-start-time {
		font-size: 14px;
		flex: 2;
	}

	.record-caregiver-name {
		font-size: 14px;
		flex: 2;
	}

	.record-score {
		font-size: 14px;
		flex: 2;
	}

	.evaluate-btn {
		font-size: 14px;
		flex: 2;
	}

	.detail-btn {
		font-size: 14px;
		flex: 2;
	}

	/* 空状态样式 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50px 20px;
		text-align: center;
		background: white;
		margin: 20px;
		border-radius: 16px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
		animation: fadeIn 0.6s ease;
	}

	.empty-image {
		width: 180px;
		height: 180px;
		margin-bottom: 20px;
		opacity: 0.9;
	}

	.empty-text {
		font-size: 18px;
		font-weight: 500;
		color: #5a5a5a;
		margin-bottom: 15px;
		letter-spacing: 1px;
	}

	.empty-subtext {
		font-size: 14px;
		color: #999;
		line-height: 1.6;
		max-width: 300px;
		margin-bottom: 25px;
	}
</style>